aside.aside-menu
  if !starter
    ul.nav.nav-tabs(role="tablist")
      li.nav-item
        a.nav-link.active(data-toggle="tab" href="#timeline" role="tab")
          i.icon-list
      li.nav-item
        a.nav-link(data-toggle="tab" href="#messages" role="tab")
          i.icon-speech
      li.nav-item
        a.nav-link(data-toggle="tab" href="#settings" role="tab")
          i.icon-settings
    // Tab panes
    .tab-content
      #timeline.tab-pane.active(role="tabpanel")
        .list-group.list-group-accent
          .list-group-item.list-group-item-accent-secondary.bg-light.text-center.font-weight-bold.text-muted.text-uppercase.small
            | Today
          .list-group-item.list-group-item-accent-warning.list-group-item-divider
            .avatar.float-right
              img.img-avatar(src='img/avatars/7.jpg', alt='admin@bootstrapmaster.com')
            div
              | Meeting with
              strong Lucas
            small.text-muted.mr-3
              i.icon-calendar
              |   1 - 3pm
            small.text-muted
              i.icon-location-pin
              |   Palo Alto, CA
          .list-group-item.list-group-item-accent-info
            .avatar.float-right
              img.img-avatar(src='img/avatars/4.jpg', alt='admin@bootstrapmaster.com')
            div
              | Skype with
              strong Megan
            small.text-muted.mr-3
              i.icon-calendar
              |   4 - 5pm
            small.text-muted
              i.icon-social-skype
              |   On-line
          .list-group-item.list-group-item-accent-secondary.bg-light.text-center.font-weight-bold.text-muted.text-uppercase.small
            | Tomorrow
          .list-group-item.list-group-item-accent-danger.list-group-item-divider
            div
              | New UI Project -
              strong deadline
            small.text-muted.mr-3
              i.icon-calendar
              |   10 - 11pm
            small.text-muted
              i.icon-home
              |   creativeLabs HQ
            .avatars-stack.mt-2
              .avatar.avatar-xs
                img.img-avatar(src='img/avatars/2.jpg', alt='admin@bootstrapmaster.com')
              .avatar.avatar-xs
                img.img-avatar(src='img/avatars/3.jpg', alt='admin@bootstrapmaster.com')
              .avatar.avatar-xs
                img.img-avatar(src='img/avatars/4.jpg', alt='admin@bootstrapmaster.com')
              .avatar.avatar-xs
                img.img-avatar(src='img/avatars/5.jpg', alt='admin@bootstrapmaster.com')
              .avatar.avatar-xs
                img.img-avatar(src='img/avatars/6.jpg', alt='admin@bootstrapmaster.com')
          .list-group-item.list-group-item-accent-success.list-group-item-divider
            div
              strong #10 Startups.Garden
              |  Meetup
            small.text-muted.mr-3
              i.icon-calendar
              |   1 - 3pm
            small.text-muted
              i.icon-location-pin
              |   Palo Alto, CA
          .list-group-item.list-group-item-accent-primary.list-group-item-divider
            div
              strong Team meeting
            small.text-muted.mr-3
              i.icon-calendar
              |   4 - 6pm
            small.text-muted
              i.icon-home
              |   creativeLabs HQ
            .avatars-stack.mt-2
              .avatar.avatar-xs
                img.img-avatar(src='img/avatars/2.jpg', alt='admin@bootstrapmaster.com')
              .avatar.avatar-xs
                img.img-avatar(src='img/avatars/3.jpg', alt='admin@bootstrapmaster.com')
              .avatar.avatar-xs
                img.img-avatar(src='img/avatars/4.jpg', alt='admin@bootstrapmaster.com')
              .avatar.avatar-xs
                img.img-avatar(src='img/avatars/5.jpg', alt='admin@bootstrapmaster.com')
              .avatar.avatar-xs
                img.img-avatar(src='img/avatars/6.jpg', alt='admin@bootstrapmaster.com')
              .avatar.avatar-xs
                img.img-avatar(src='img/avatars/7.jpg', alt='admin@bootstrapmaster.com')
              .avatar.avatar-xs
                img.img-avatar(src='img/avatars/8.jpg', alt='admin@bootstrapmaster.com')
      #messages.tab-pane.p-3(role="tabpanel")
        .message
          .py-3.pb-5.mr-3.float-left
            .avatar
              img.img-avatar(src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com")
              span.avatar-status.badge-success
          div
            small.text-muted Lukasz Holeczek
            small.text-muted.float-right.mt-1 1:52 PM
          .text-truncate.font-weight-bold Lorem ipsum dolor sit amet
          small.text-muted
            | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
        hr
        .message
          .py-3.pb-5.mr-3.float-left
            .avatar
              img.img-avatar(src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com")
              span.avatar-status.badge-success
          div
            small.text-muted Lukasz Holeczek
            small.text-muted.float-right.mt-1 1:52 PM
          .text-truncate.font-weight-bold Lorem ipsum dolor sit amet
          small.text-muted
            | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
        hr
        .message
          .py-3.pb-5.mr-3.float-left
            .avatar
              img.img-avatar(src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com")
              span.avatar-status.badge-success
          div
            small.text-muted Lukasz Holeczek
            small.text-muted.float-right.mt-1 1:52 PM
          .text-truncate.font-weight-bold Lorem ipsum dolor sit amet
          small.text-muted
            | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
        hr
        .message
          .py-3.pb-5.mr-3.float-left
            .avatar
              img.img-avatar(src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com")
              span.avatar-status.badge-success
          div
            small.text-muted Lukasz Holeczek
            small.text-muted.float-right.mt-1 1:52 PM
          .text-truncate.font-weight-bold Lorem ipsum dolor sit amet
          small.text-muted
            | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
        hr
        .message
          .py-3.pb-5.mr-3.float-left
            .avatar
              img.img-avatar(src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com")
              span.avatar-status.badge-success
          div
            small.text-muted Lukasz Holeczek
            small.text-muted.float-right.mt-1 1:52 PM
          .text-truncate.font-weight-bold Lorem ipsum dolor sit amet
          small.text-muted
            | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
      #settings.tab-pane.p-3(role="tabpanel")
        h6 Settings
        .aside-options
          .clearfix.mt-4
            small
              b Option 1
            label.switch.switch-label.switch-pill.switch-success.switch-sm.float-right
              input.switch-input(type="checkbox" checked="")
              span.switch-slider(data-checked="On" data-unchecked="Off")
          div
            small.text-muted
              | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        .aside-options
          .clearfix.mt-3
            small
              b Option 2
            label.switch.switch-label.switch-pill.switch-success.switch-sm.float-right
              input.switch-input(type="checkbox")
              span.switch-slider(data-checked="On" data-unchecked="Off")
          div
            small.text-muted
              | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        .aside-options
          .clearfix.mt-3
            small
              b Option 3
            label.switch.switch-label.switch-pill.switch-success.switch-sm.float-right
              input.switch-input(type="checkbox")
              span.switch-slider(data-checked="On" data-unchecked="Off")
        .aside-options
          .clearfix.mt-3
            small
              b Option 4
            label.switch.switch-label.switch-pill.switch-success.switch-sm.float-right
              input.switch-input(type="checkbox" checked="")
              span.switch-slider(data-checked="On" data-unchecked="Off")
        hr
        h6 System Utilization
        .text-uppercase.mb-1.mt-4
          small
            b CPU Usage
        .progress.progress-xs
          .progress-bar.bg-info(role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100")
        small.text-muted 348 Processes. 1/4 Cores.
        .text-uppercase.mb-1.mt-2
          small
            b Memory Usage
        .progress.progress-xs
          .progress-bar.bg-warning(role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100")
        small.text-muted 11444GB/16384MB
        .text-uppercase.mb-1.mt-2
          small
            b SSD 1 Usage
        .progress.progress-xs
          .progress-bar.bg-danger(role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100")
        small.text-muted 243GB/256GB
        .text-uppercase.mb-1.mt-2
          small
            b SSD 2 Usage
        .progress.progress-xs
          .progress-bar.bg-success(role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100")
        small.text-muted 25GB/256GB
